<template>
    <el-pagination
        class="pagination"
        v-bind="$attrs"
        :total="total"
        :current-page="currentPage"
        :layout="layout"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        v-on="$listeners"
    />
</template>
<script>
import { PaginationOption } from '@/config/constants'
export default {
    name: 'Pagination',
    props: {
        total: {
            type: Number,
            default: 0
        },
        currentPage: {
            type: Number,
            default: 1
        },
        pageSize: {
            type: Number,
            default: PaginationOption.PAGE_SIZE
        },
    },
    data() {
        return {
            layout: PaginationOption.LAYOUT,
            pageSizes: PaginationOption.PAGE_SIZES,
        }
    },
    watch: {
        total(newValue, oldValue) {
            // 当前页正好只有1条数据，被删除时，当前页减1，重新触发change事件加载下数据。
            // 缺点就是会调用2次接口加载数据，但优点是不用在每个业务里处理
            if (this.total % this.pageSize === 0 && this.currentPage > 1) {
                this.$emit('update:currentPage', this.currentPage - 1)
                this.$emit('current-change')
            }
        }
    }
}
</script>

<style lang="scss">
// 分页选择框边框样式
.pagination.el-pagination {
    .el-select .el-input .el-input__inner {
        border-color: #e2e2e2;
        background: #ffffff;

        &:hover {
            border-color: #d2d2d2;
        }
    }

    .el-select .el-input.is-focus .el-input__inner {
        border-color: #0062ff;
    }

    .el-select .el-input .el-select__caret {
        color: #e2e2e2;

        &:hover {
            color: #d2d2d2;
        }

        &.is-reverse {
            color: #d2d2d2;
        }
    }

    // 分页总条目样式
    span.el-pagination__total {
        height: 28px;
        line-height: 28px;
        margin-right: 8px;
        font-size: 12px;
        color: #44444f;
    }

    // 分页大小样式
    .el-pagination__sizes {
        margin-right: 8px;

        .el-input--suffix {
            width: 80px;
            margin: 0px;

            .el-input__inner {
                height: 28px;
                line-height: 28px;
                text-align: left;
                font-size: 12px;
            }
        }
    }
    .el-input__inner,
    .el-input {
        line-height: 28px;
        min-width: 50px !important;
    }

    // 分页按钮样式
    button {
        height: 28px;
        line-height: 28px;
        min-width: 8px;
        color: #44444f;

        &:disabled {
            color: #d2d2d2;
        }
    }

    .btn-prev {
        padding: 0 4px 0 0;
        .el-icon-arrow-left {
            width: 10px;
            margin: 0px;
            &:hover {
                color: #0062ff;
            }
        }
    }

    // 页码详情样式
    li {
        height: 28px;
        line-height: 28px;
        padding: 0 4px;
        min-width: 8px;
        font-size: 12px;

        &.active {
            color: #0062ff;
        }

        &:hover {
            color: #0062ff;
        }
    }

    .btn-next {
        padding: 0 0 0 4px;
        .el-icon-arrow-right {
            width: 10px;
            margin: 0px;
            &:hover {
                color: #0062ff;
            }
        }
    }

    // 分页跳转样式
    span.el-pagination__jump {
        margin-left: 8px;
        font-size: 12px;

        .el-input {
            margin: 0 8px;
            padding: 0;
            .el-input__inner {
                height: 28px;
                padding: 0;
                font-size: 12px;
                background: #ffffff;
                border-color: #e2e2e2;
                &:hover {
                    border-color: #d2d2d2;
                }
                &:focus {
                    border-color: #0062ff;
                }
            }
        }
    }
}

// 分页大小选择框内容样式
.el-popper .el-select-dropdown__list .el-select-dropdown__item {
    height: 28px;
    line-height: 28px;
    font-size: 12px;
    opacity: 0.94;

    &.selected {
        color: #0062ff;
    }

    &:hover {
        color: #0062ff;
    }
}
</style>
